<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<body th:fragment="content">
<div>
	<div id="treeArea" class="col-xs-5 col-sm-5"></div>
	<div class="col-xs-7 col-sm-7">
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label for="menuNames" class="col-sm-2 control-label">메뉴명</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="menuName" name="menuName" placeholder="메뉴명" />
				</div>
			</div>
			<div class="form-group">
				<label for="links" class="col-sm-2 control-label">Links</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="links" name="links" placeholder="Links" />
				</div>
			</div>
			<div class="form-group">
				<label for="links" class="col-sm-2 control-label">권한</label>
				<div class="col-sm-10">
					<select id="authority" name="authority" class="form-control">
						<option value="1">모두 공개</option>
						<option value="2">로그인회원 공개</option>
						<option value="3">관리자</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="button" id="create" name="create" class="btn btn-default">추가</button>
					<button type="button" id="delete" name="delete" class="btn btn-default">삭제</button>
					<button type="button" id="save" name="save" class="btn btn-success">저장</button>
				</div>
			</div>
		</form>
	</div>
</div>

<link href="//localhost:8080/goodwilldd/resources/dynatree/skin/ui.dynatree.css"
	th:href="@{${JSURL}+'/dynatree/skin/ui.dynatree.css'}" rel="stylesheet" />
<script src="//wwwendt.de/tech/dynatree/src/jquery.dynatree.js"
	th:src="@{${JSURL}+'/dynatree/jquery.dynatree.min.js'}" type="text/javascript"></script>
<script th:inline="javascript">
/*<![CDATA[*/
    $(document).ready(function(){
    	$("#treeArea").dynatree({
    		//checkbox: false,
    		//selectMode: 3,
    		initAjax: {
    			url: /*[[@{/rest/getMenus.json}]]*/
    		},
    		minExpandLevel : 3,
    		autoFocus: true,
    		onActivate:function(node) {
    			//console.log("onActivate", node);
    			//console.log("onActivate menuName", node.data.metadata.menuName);
    			//console.log("onActivate links", node.data.metadata.links);
    			$("#menuName").val(node.data.metadata.menuName);
    			$("#links").val(node.data.metadata.links);
    			$("#authority").val(node.data.metadata.authority);
    		},
    		onFocus: function(node) {
    			node.scheduleAction("activate", 200);
    		},
    		onLazyRead: function(node){
    			node.appendAjax({
    				url: /*[[@{/rest/getMenus.json}]]*/,
    				debugLazyDelay: 750 // don't do this in production code
    			});
    		},
    		dnd: {
    			onDragStart: function(node) {
    				return true;
    			},
    			onDragStop: function(node) {
    			},
    			autoExpandMS: 1000,
    			preventVoidMoves: true,
    			onDragEnter: function(node, sourceNode) {
    				return true;
    			},
    			onDragOver: function(node, sourceNode, hitMode) {
    				if(node.isDescendantOf(sourceNode)){
    					return false;
    				}
    				if( !node.data.isFolder && hitMode === "over" ){
    					return "after";
    				}
    			},
    			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
    				sourceNode.move(node, hitMode);
    				node.expand(true);
    			},
    			onDragLeave: function(node, sourceNode) {
    				sourceNode.data.metadata.parentSeq = sourceNode.parent.data.metadata.childSeq;
    			}
    		},
    		debugLevel : 1
    	});
    	
    	 $("#menuName").change(function(){
   			var selectedNode = $("#treeArea").dynatree("getActiveNode");
   			selectedNode.setTitle($(this).val());
   			selectedNode.data.metadata.menuName = $(this).val(); 
   		});
   		
   		$("#links").change(function() {
   			var selectedNode = $("#treeArea").dynatree("getActiveNode");
   			selectedNode.data.metadata.links = $(this).val();
   		});
   		
   		$("#create").click(function() {
   			var selectedNode = $("#treeArea").dynatree("getActiveNode");
   			/* TODO childSeq 데이터 베이스에서 가져오도록~~ */
   			console.log(selectedNode.data.metadata);
   			
   			$.post(/*[[@{/rest/getMenuSequence.json}]]*/, null, function(res) {
   			}).done(function(res) {
   				selectedNode.addChild({
   	   				title: "New Menu",
   	   				metadata: {
   	   	               "menuName": "New Menu",
   	   	               "orders": 0,
   	   	               "childSeq": res,
   	   	               "parentSeq": selectedNode.data.metadata.childSeq,
   	   	               "types": "normal",
   	   	               "links": "/",
   	   	               "authority" : "1"
   	   	           	}
   	   			});
   			});
   		});
   		
   		$("#delete").click(function() {
   			var selectedNode = $("#treeArea").dynatree("getActiveNode");
   			if ( selectedNode.data.key == '_2' ) {
   				alert("최상위 엘리먼트는 삭제하실 수 없습니다.");
   				return;
   			}
   			var parent = selectedNode.parent;
   			selectedNode.remove();
   			parent.focus();
   		});
   		
   		$("#save").click(function() {
   			var nodes = $("#treeArea").dynatree("getRoot");
   			var sendData = [];
   			function getChildMetadata(childList) {
   				$.each(childList, function() {
   					if ( this.data.metadata != null)
   						sendData.push(this.data.metadata);
   					
   					if ( this.childList != null)
   						getChildMetadata(this.childList);
   				});
   			};
   			
   			getChildMetadata(nodes.childList);
   			
   			console.log(sendData);
   			console.log(JSON.stringify(sendData));
   			var param = {"data" : JSON.stringify(sendData)};
   			$.post(/*[[@{/rest/doUpdateMenu}]]*/
   					, param, function(res) {
   				console.log(res);
   			});
   		});
    });
    
   
/*]]>*/
</script>
</body>
</html>